<template>
	<div class="edit-book">
		<div class="title">
			<el-icon>
				<ArrowLeftBold />
			</el-icon>
			<h2>编辑作品</h2>
			<div class="seat"></div>
		</div>
		<div class="top">
			<div class="con">
				<div class="set" @click="wordSettings">
					<el-icon color="#fa715d" :size="16">
						<Setting />
					</el-icon>
					<span>作品设定</span>
				</div>
				<div class="work-info">
					<div class="image">
						<img src="../assets/images/mywork.webp" alt="" />
					</div>
					<div class="text">
						<h2>test</h2>
						<p>
							<span>未发布</span>
							<span>17字</span>
						</p>
					</div>
				</div>
				<!-- <div class="btn">
					<el-button @click="addWork" round size="large" color="#fa715d" :icon="EditPen">新增作品</el-button>
				</div>  -->
				<div class="sort-type">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
							全部章节<el-icon class="el-icon--right" :size="16">
								<ArrowDown />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>全部章节</el-dropdown-item>
								<el-dropdown-item>已发布</el-dropdown-item>
								<el-dropdown-item>未发布</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<div @click="paixuHref" class="chapter-sort">
						<el-icon :size="16" color="#fa715d">
							<Sort />
						</el-icon>
						<span>章节排序</span>
					</div>
				</div>
			</div>
		</div>

		<div class="bottom">
			<div class="diversity-box">
				<div class="diversity-item">
					<div class="tit">
						<h3>未命名分集</h3>
						<el-dropdown trigger="click">
									<el-icon class="el-dropdown-link" :size="16" color="#718096">
										<MoreFilled />
									</el-icon>
									<!-- <span class="el-dropdown-link">
										全部章节<el-icon class="el-icon--right" :size="16">
											<ArrowDown />
										</el-icon>
									</span> -->
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item ><img class="sheding-image"
													src="@/assets/images/setting.png"></img>
												<div @click="editFenji">编辑分集</div>
											</el-dropdown-item>
											<el-dropdown-item ><img class="sheding-image"
													src="@/assets/images/delete.png"></img>
												<div @click="deleteFenji">删除分集</div>
											</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
					</div>
					<div class="chapter-list">
						<div class="item">
							<div class="item-l" @click="zhangjieAction">
								<h3>未命名章节</h3>
								<p><span>未发布</span></p>
								<div class="icon">
									<div>
										 <span class="textName">字</span>
										<span>17</span>
									</div>
									<div>
										<el-icon :size="16" color="#4a5568">
											<View />
										</el-icon>
										<span>0</span>
									</div>
								</div>
							</div>
							<div class="item-r">
								<!-- <el-icon :size="16" color="#718096"><MoreFilled /></el-icon> -->
								<el-dropdown trigger="click">
									<el-icon class="el-dropdown-link" :size="16" color="#718096">
										<MoreFilled />
									</el-icon>
									<!-- <span class="el-dropdown-link">
										全部章节<el-icon class="el-icon--right" :size="16">
											<ArrowDown />
										</el-icon>
									</span> -->
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click="settingAction(1)"><img class="sheding-image"
													src="@/assets/images/setting.png"></img>章节设定</el-dropdown-item>
											<el-dropdown-item @click="settingAction(3)"><img class="sheding-image"
													src="@/assets/images/delete.png"></img>刪除章节</el-dropdown-item>
											<el-dropdown-item @click="settingAction(4)"><img class="sheding-image"
													src="@/assets/images/shuben.png"></img>发布章节</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</div>
						<div class="item">
							<div class="item-l">
								<h3>未命名章节</h3>
								<p><span>未发布</span></p>
								<div class="icon">
									<div>
										 <span class="textName">字</span>
										<span>17</span>
									</div>
									<div>
										<el-icon :size="16" color="#4a5568">
											<View />
										</el-icon>
										<span>0</span>
									</div>
								</div>
							</div>
							<div class="item-r">
								<el-icon :size="16" color="#718096">
									<MoreFilled />
								</el-icon>
							</div>
						</div>
					</div>

					<div class="add-chapter-btn" @click="dialogFormVisible2 = true">
						<el-icon :size="16" color="#718096">
							<EditPen />
						</el-icon>
						<span>新增章节</span>
					</div>
				</div>
				<div class="diversity-item">
					<div class="tit">
						<h3>123</h3>
						<el-icon :size="16" color="#718096">
							<MoreFilled />
						</el-icon>
					</div>
					<div class="chapter-list"></div>

					<div class="add-chapter-btn" @click="dialogFormVisible2 = true">
						<el-icon :size="16" color="#718096">
							<EditPen />
						</el-icon>
						<span>新增章节</span>
					</div>
				</div>

				<div class="add-diversity-btn" @click="dialogFormVisible = true">
					<el-icon :size="16" color="#fa715d">
						<Tickets />
					</el-icon>
					<span>新增分集</span>
				</div>
			</div>
		</div>

		<el-dialog v-model="dialogFormVisible" title="新增分集" center>
			<el-input type="text" autocomplete="off" placeholder="分集标题名称" maxlength="65" show-word-limit />
			<template #footer>
				<div class="dialog-footer">
					<el-button class="enter-footer" round type="primary" @click="dialogFormVisible = false">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="addWorkShow" title="新增作品" center>
			<div class="title-dailog">
				作品名称
			</div>
			<div class="top10">
				<el-input placeholder="请输入作品名称"></el-input>
			</div>
			<div class="top10 title-dailog">
				作品类别
			</div>
			<div class="zhishao-box">
				至少勾选一种类别
			</div>
			<div class="type-list-box">
				<!-- {{ item.title }} -->
				<el-checkbox v-for="(item,index) in typeBosList" :key="index" @click="typeAciotn(index)">{{ item.text }}</el-checkbox>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button class="enter-footer" round type="primary" @click="dialogFormVisible = false">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="fenjiShowEdit" title="编辑分集标题" center>
			<div>
				编辑分集标题
			</div>
			<div class="type-list-box top10 space-between">
				<el-input v-model="fenjiTitle" placeholder="分集2"></el-input>
			</div>
			<div class="top10">
				3 / 65
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button class="enter-footer" round type="primary" @click="dialogFormVisible = false">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="fabuShow" title="发布章节" center>
			<div>
				请选择发布的作品类型
			</div>
			<div class="type-list-box top10">
				<div>
				<el-checkbox>立即发布</el-checkbox>
				</div>
				<div>
				<el-checkbox>定时发布</el-checkbox>
				</div>
			</div>
			<div class="top10">
                        <el-date-picker style="width: 100%;" v-model="dataTime" type="datetime" format="[Week] ww" placeholder="请选择发布日期" />
                    </div>
					<div class="top10">
				<el-checkbox>发布章节时，同时发布作品?</el-checkbox>
				</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button class="enter-footer" round type="primary" @click="dialogFormVisible = false">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="dialogFormVisible2" title="新增章节" center>
			<div class="form-item">
				<label for="">分集</label>
				<el-select v-model="value" placeholder="Select" style="width: 240px">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div class="form-item">
				<label for="">章节</label>
				<el-input type="text" autocomplete="off" placeholder="分集标题名称" maxlength="65" show-word-limit />
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button class="enter-footer" round type="primary" @click="dialogFormVisible = false">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="deleteShow" title="刪除章节" center>
			<div class="content-form">
				您确定删除章节？删除章节將不可恢复。
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button class="enter-footer" round type="primary">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="deleteFenjiShow" title="删除分集" center>
			<div class="content-form">
				确定要删除此分集吗？请留意，如含有章节也会一并删除
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button class="enter-footer" round type="primary">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-drawer v-model="drawerVisible" direction="bbt" :with-header="false" :show-close="true">
			<div class="avatar-box">
				<el-avatar :size="74" />
				<span>角角者266500</span>
			</div>
			<nav>
				<ul>
					<li @click="rightActionHref('/user')">
						<div>
							<el-icon :size="24" class="edit-icon">
								<Edit />
							</el-icon>
							<span>个人设定</span>
						</div>
					</li>
					<li @click="rightActionHref('/collection')">
						<div>
							<el-icon :size="24" class="edit-icon">
								<Edit />
							</el-icon>
							<span>我的收藏</span>
						</div>
					</li>
					<li @click="rightActionHref('/creation_center')">
						<div>
							<el-icon :size="24" class="edit-icon">
								<Edit />
							</el-icon>
							<span>创作中心</span>
						</div>
					</li>
					<li @click="rightActionHref('/login')">
						<div>
							<el-icon :size="24" class="edit-icon">
								<Edit />
							</el-icon>
							<span>退出登录</span>
						</div>
					</li>
				</ul>
			</nav>
		</el-drawer>
	</div>
</template>

<script setup>
import {
	ArrowLeftBold,
	Setting,
	EditPen,
	ArrowDown,
	Sort,
	MoreFilled,
	View,
	Tickets,
} from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dialogFormVisible = ref(false);
const dialogFormVisible2 = ref(false);
const deleteShow = ref(false)
const typeList = ref([
{
	title:'小说'
},{
	title:'漫画'
},{
	title:'插画'
}])
const zhangjieAction = () => {
	router.push('/chapterEditContent')

}
const currentindex = ref(0)
const typeAciotn = (index)=>{
	currentindex.value = index
}
const fabuShow = ref(false)
const fenjiShowEdit = ref(false)
const fenjiTitle = ref('')
const deleteFenjiShow = ref(false)
const editFenji = ()=>{
	fenjiShowEdit.value = true
}
const deleteFenji = ()=>{
	deleteFenjiShow.value = true
}
const settingAction = (index) => {
	console.log('11');

	if (index == 1) {
		router.push('/chapterEdit')
	} else if (index == 3) {
		deleteShow.value = true
	}else if (index == 4) {
		fabuShow.value = true
	}
}

const options = [
	{
		value: "Option1",
		label: "Option1",
	},
	{
		value: "Option2",
		label: "Option2",
	},
	{
		value: "Option3",
		label: "Option3",
	},
	{
		value: "Option4",
		label: "Option4",
	},
	{
		value: "Option5",
		label: "Option5",
	},
];

const typeBosList = ref([
	{
		text: "日常温馨",
		src: '',
		href: '/search'
	},
	{
		text: "西幻",
		src: '',
		href: '/search'
	},
	{
		text: "奇幻",
		src: '',
		href: '/search'
	},
	{
		text: "未来科幻",
		src: '',
		href: '/search'
	},
	{
		text: "重生穿越",
		src: '',
		href: '/search'
	},
	{
		text: "玄幻仙侠武侠",
		src: '',
		href: '/search'
	},
	{
		text: "犯罪悬疑推理",
		src: '',
		href: '/search'
	},
	{
		text: "恐怖惊悚灵异",
		src: '',
		href: '/search'
	},
	{
		text: "青春校园",
		src: '',
		href: '/search'
	},
	{
		text: "现代社会",
		src: '',
		href: '/search'
	},
	{
		text: "古代历史",
		src: '',
		href: '/search'
	},
	{
		text: "近代民国",
		src: '',
		href: '/search'
	},
	{
		text: "其他架空世界观",
		src: '',
		href: '/search'
	},
])

const addWorkShow = ref(false)

const addWork = ()=>{
	addWorkShow.value = true
}

const paixuHref = () => {
	router.push('/creation_center/chapterSort')
}

const wordSettings = () => {
	router.push('/creation_center/bookSetting')
}
</script>

<style lang="scss" scoped>
	.type-index{
		border: 1px #e5e5e5 solid;
		border-radius: 30px;
		padding: 10px 20px;
		width: 100%;
		text-align: center;
		margin-left: 10px;
		margin-top: 20px;
	}
	

	.type-index-1{
		border: 1px #fa715d solid;
		color: #fa715d;
	}
.enter-footer {
	background-color: #fa715d;
	padding: 1.3rem 0;
	border: none;
}

.content-form {
	padding: 1rem 0;
}

.sheding-image {
	width: 1rem;
	margin-right: 0.2rem;
}

:deep(.el-overlay-dialog) {
	margin: 1rem;
}

.edit-book {
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 1rem;
		padding-right: 1rem;
		gap: 0.5rem;
		height: 4rem;
		background: #fff;

		.seat {
			width: 3rem;
			height: 100%;
			flex: 0 0 auto;
		}
	}

	.top {
		background: #fff;
		padding-left: 1rem;
		padding-right: 1rem;

		.con {
			width: 100%;
			max-width: 61.5rem;
			margin: 0 auto;
		}

		.set {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			justify-content: end;
			margin-bottom: 1rem;

			span {
				font-size: 0.875rem;
				font-weight: 500;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: #fa715d;
			}
		}

		.work-info {
			display: flex;
			display: flex;
			gap: 1rem;
			background-color: #fff;
			margin-bottom: 1rem;

			.image {
				flex: 0 0 auto;
				position: relative;
				aspect-ratio: 7 / 10;
				width: 127px;
				height: 182px;
				clip-path: inset(0px round 0.25rem);

				img {
					width: 127px;
					height: 182px;
				}
			}

			.text {
				display: flex;
				flex: 1 1 0px;
				flex-flow: column;
				gap: 1rem;

				h2 {
					font-size: 1.05rem;
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: 0.05em;
					color: #1a202c;
				}

				p {
					display: flex;
					gap: 1rem;

					span {
						font-size: 0.75rem;
						font-weight: 400;
						line-height: 1.625;
						letter-spacing: 0.05em;
						color: #718096;
					}
				}
			}
		}

		.btn {
			display: flex;
			justify-content: center;

			:deep(.el-button) {
				width: 100%;
				max-width: 16rem;
				margin: 0 auto;
				color: #fff;
			}
		}

		.sort-type {
			display: flex;
			align-items: center;
			height: 4rem;
			justify-content: space-between;

			.chapter-sort {
				display: flex;
				align-items: center;
				gap: 0.5rem;

				span {
					font-size: 0.875rem;
					font-weight: 500;
					line-height: 1.5;
					letter-spacing: 0.05em;
					color: #fa715d;
				}
			}
		}
	}

	.bottom {
		margin: 0px auto;
		width: 100%;
		max-width: 61.5rem;
		padding-left: 1rem;
		padding-right: 1rem;

		.tit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 4rem;

			h3 {
				font-size: 1rem;
				font-weight: 400;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: #1a202c;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			:deep(.el-icon) {
				width: 3rem;
				height: 3rem;
				transform: rotate(90deg);
			}
		}

		.chapter-list {
			display: flex;
			flex-flow: column;
			gap: 1rem;

			.item {
				padding: 1rem;
				border-radius: 0.25rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				min-height: 4.875rem;
				background-color: #edf2f7;
				overflow: visible;
				gap: 0.5rem;
				cursor: pointer;

				.item-l {
					display: flex;
					flex-direction: column;
					gap: 0.5rem;
					.textName {
						font-size: 0.875rem;
						font-weight: 500;
						color: #2d3748;
					}
				}

				.item-r {
					:deep(.el-icon) {
						transform: rotate(90deg);
					}
				}

				h3 {
					font-size: 0.875rem;
					font-weight: 400;
					line-height: 2;
					letter-spacing: 0.05em;
					color: #2d3748;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				p {
					span {
						font-size: 0.75rem;
						font-weight: 400;
						line-height: 1.625;
						letter-spacing: 0.05em;
						color: #718096;
					}
				}

				.icon {
					display: flex;
					align-items: center;
					gap: 0.5rem;

					div {
						display: flex;
						gap: 0.5rem;
						align-items: center;

						span {
							font-size: 0.75rem;
							font-weight: 300;
							line-height: 1.625;
							letter-spacing: 0.05em;
							color: #4a5568;
						}
					}
				}
			}
		}

		.add-chapter-btn {
			display: flex;
			align-items: center;
			height: 4rem;
			gap: 0.5rem;
			cursor: pointer;

			span {
				font-size: 0.875rem;
				font-weight: 500;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: #718096;
			}
		}

		.add-diversity-btn {
			display: flex;
			align-items: center;
			height: 4rem;
			gap: 0.5rem;
			cursor: pointer;

			span {
				font-size: 0.875rem;
				font-weight: 500;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: #fa715d;
			}
		}
	}
}

:deep(.el-dialog) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 32rem;
	border-radius: 0.5rem;
	margin: 0;

	.form-item {
		margin-bottom: 1rem;

		label {
			display: block;
			font-size: 0.875rem;
			font-weight: 500;
			line-height: 1.5;
			letter-spacing: 0.05em;
			color: #1a202c;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin-bottom: 1rem;
		}

		.el-select {
			width: 100% !important;
		}
	}
}

:deep(.el-dialog__footer) {
	button {
		width: 100%;
		max-width: 16rem;
	}
}

.type-list-box{

}

.zhishao-box{
	font-size: 0.8rem;
	color: #fa715d;
	margin-top: 0.2rem;
}

.title-dailog{
	font-weight: 600;
}

</style>